<template>
    <div class="home-page">
        <div class="banner">
            <div class="container">
            <h1 class="logo-font">conduit</h1>
            <p>A place to share your knowledge.</p>
            </div>
        </div>
        <div class="container page">
            <div class="row">

            <div class="col-md-9">
                <div class="feed-toggle">
                <ul class="nav nav-pills outline-active">
                    <li class="nav-item" v-if="user">
                        <nuxt-link 
                            exact
                            class="nav-link" 
                            :to="{
                                name:'home',
                                query:{
                                    tab:'your_feed'
                                }
                            }"
                            :class="{active:$route.query.tab=='your_feed'}"
                            >Your Feed</nuxt-link>
                    </li>
                    <li class="nav-item">
                        <nuxt-link 
                            exact
                            class="nav-link" 
                            :to="{
                                name:'home',
                                query:{
                                    tab:'gloabl_feed'
                                }
                            }"
                            :class="{active:$route.query.tab!='your_feed'||$route.query.tab!='tag'}"
                        >
                            Global Feed
                        </nuxt-link>
                    </li>
                    <li class="nav-item" v-if="$route.query.tag">
                        <nuxt-link 
                            class="nav-link" 
                            :to="{
                                name:'home',
                                query:{
                                    tab:'tag',
                                    tag:tag
                                }
                            }"
                            :class="{active:$route.query.tab=='tag'}"
                        >
                            #{{$route.query.tag}}
                        </nuxt-link>
                    </li>
                </ul>
                </div>
                <div class="article-preview" v-for="(item,index) in articles" :key="item.slug">
                    <div class="article-meta">
                        <nuxt-link :to="{
                            name:'profile',
                            params:{
                                username:item.author.username
                            }
                        }">
                            <img :src="item.author.image" />
                        </nuxt-link>
                        <div class="info">
                        <nuxt-link :to="{
                            name:'profile',
                            params:{
                                username:item.author.username
                            }
                            }" 
                            class="author"
                        >
                            {{item.author.username}}
                        </nuxt-link>
                        <span class="date">{{item.createdAt | date('MMM DD,YYYY')}}</span>
                        </div>
                        <button 
                            class="btn btn-outline-primary btn-sm pull-xs-right" 
                            :class="{
                                active:item.favorited
                            }"
                            @click="addFavoriteFN(item)"
                            :disabled="item.favoriteDisabled"
                        >
                            <i class="ion-heart"></i> {{item.favoritesCount}}
                        </button>
                    </div>
                    <nuxt-link class="preview-link" :to="{
                        name:'article',
                        params:{
                            slug:item.slug
                        }
                    }">
                        <h1>{{item.title}}</h1>
                        <p>{{item.description}}</p>
                        <span>Read more...</span>
                    </nuxt-link>
                </div>
                <nav>
                    <ul class="pagination">
                        <li class="page-item" v-for="item in totalPage" :class="{active:item==$route.query.page}" :key="item">
                            <nuxt-link class="page-link ng-binding" :to="{
                                name:'home',
                                query:{
                                    page:item,
                                    tag:tag,
                                    tab:tab
                                }
                            }" >{{item}}</nuxt-link>
                        </li>
                    </ul>
                </nav>
                
            </div>

            <div class="col-md-3">
                <div class="sidebar">
                <p>Popular Tags</p>
                <div class="tag-list">
                    <nuxt-link 
                        class="tag-pill tag-default" 
                        :to="{
                            name:'home',
                            query:{
                                tag:item,
                                tab:'tag'
                            }
                        }" 
                        v-for="item in tags" 
                        :key="item"
                    >
                        {{item}}
                    </nuxt-link>
                </div>
                </div>
            </div>

            </div>
        </div>
    </div>
</template>
<script>
import { getArticle , getFeedArticle,addFavorite,deleteFavorite } from '@/api/article'
import {getTags} from '@/api/tags'

export default {
    name: 'HomeIndex',
    watchQuery:['page','tag','tab'],//监听query参数变化
    async asyncData({ query , store }){
        const user = store.state.user
        const page = Number.parseInt(query.page||1)
        const limit = 10
        const loadArticle = user && query.tab==='your_feed' ? getFeedArticle : getArticle
        const [articleRes,tagsRes] = await Promise.all([
            loadArticle({
                limit,
                offset:(page-1)*limit,
                tag:query.tag,
                page
            }),
            getTags()
        ])
        const { articles , articlesCount } = articleRes.data
        const { tags } = tagsRes.data
        const { tag } = query
        
        articles.forEach(article=>article.favoriteDisabled = false)
        // 为了拿到cookie
        
        return {
            articles,
            articlesCount,
            limit,
            page,
            tags,
            tab:query.tab||'gloabl_feed',
            tag,
            user
        }
    },
    computed:{
        totalPage(){
            return Math.ceil(this.articlesCount/this.limit)
        }
    },
    methods:{
        async addFavoriteFN(item){
            item.favoriteDisabled = true
            if(item.favorited){
                // 取消点赞
                await deleteFavorite(item.slug)
                item.favorited = false
                item.favoritesCount += -1
            }else{
                await addFavorite(item.slug)
                item.favorited = true
                item.favoritesCount += 1
            }
            item.favoriteDisabled = false
        }
    }
}
</script>